<template>
	<view>
		<view class="title">
			选择日期
		</view>
		<view class="priceCalenarBox">

			<view class="date-type">
				<scroll-view scroll-x="true" :scroll-left="dateItem.scrollLeft" :scroll-with-animation="true"
					show-scrollbar="false">
					<view class="date-list">
						<view class="date-list-item" v-for="(d,index) in week" :key="index"
							:class="{'selected':dateItem.tabTopCurrent == index}" @click="tabTopDateChange(index)">
							<view style="display: flex;">
								<text>{{d.day}}</text>
								<text>{{d.date}}</text>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="more" @click="moreDate">
				<view class="text">更多日期</view>
				<view class="right-arrow"></view>
			</view>
		</view>
		<uni-calendar ref="calendar" :selected="selected" :startDate="startDate" :endDate="endDate" :insert="false"
			:date="selectedDate" @confirm="confirm" />
	</view>
</template>

<script>
	import {
		formatDate
	} from '@/utils/format.js'
	export default {
		data() {
			return {
				dateItem: {
					itemWidth: 0,
					scrollLeft: 0, //滑动距离
					tabTopCurrent: 0
				},
				repNodeWeek: {}, //替换节点
				data: [],
				week: [],
				weekDateList: [], //周内日期集合
				startDate: '', //开始时间
				selected: [],
				endDate: '' ,//结束时间
				//planlist:{}
			};
		},
		props: {
			planlist: {
				type: Array,
				default: []
			},
			selectedDate: {
				type: String,
				default: ''
			}
		},
		mounted() {
			this.getToday()
			this.getdate()
		},
    // watch: {
    //   planlist:{
    //     handler(newVal,oldVal){
    //       console.log('oldVal:',oldVal)  
    //       console.log('newVal:',newVal) 
    //     },
    //     immediate: true
    //   }
    // },
		methods: {
			tabTopDateChange(index) {
				let selectDate = this.week[index].year + '-' + this.week[index].date;
				this.upWeek(selectDate);
				this.$emit('date', selectDate)
			},
			// 获取现在的时间
			getToday() {
				const today = new Date();
				const year = today.getFullYear();
				const month = today.getMonth() + 1;
				const day = today.getDate();
				const formattedDate = `${year}-${month}-${day}`;
				this.startDate = formattedDate
			},
			// 通过日历获取时间
			confirm(e) {
				const date = e.fulldate
				this.upWeek(date);
				this.$emit('date', date)
			},
			upWeek(date) {
				let idx = 0;
				//当选择日期大于当前日期起七天内时，将选择日期插入week第3的位置，以便更容易找到起点
				if (this.weekDateList.indexOf(date) > -1) {
					this.week.splice(2, 1, this.repNodeWeek);
					idx = this.weekDateList.indexOf(date)
				} else {
					// 当前选择日期不在当前周内
					this.week.splice(2, 1, formatDate(new Date(date)));
					idx = 2
				}
				this.dateItem.tabTopCurrent = idx;
				// 滚动滑块
				const itemWidth = 95; //每个滑块的宽度
				const scrollLeft = idx * itemWidth - itemWidth; // 计算滚动位置 从第三个开始滚动
				this.dateItem.scrollLeft = scrollLeft;
				return idx;
			},
			// 获取时间
			getdate() {
        let that =this;
        if(that.planlist.length === 0){
          return false;
        }
				// 调用函数获取一周的时间
				for (let j in that.planlist) {
					let selectedItem = {}
					selectedItem.info = that.planlist[j].share_price;
					selectedItem.date = that.planlist[j].plan_time;
					that.selected.push(selectedItem);
					that.endDate = that.planlist[j].plan_time;
				}
				// 获取planlist第一个元素的日期作为起点
				let startDate = that.planlist[0].plan_time;
				let startDay = new Date(startDate);
				const dayMS = 86400000; //单日毫秒数
				for (let i = 0; i < 7; i++) {
					const date = new Date(startDay.getTime() + i * dayMS);
					let frDate = formatDate(date);
					that.week.push(frDate);
					that.weekDateList.push(frDate.time);
					if (i === 2) {
						that.repNodeWeek = frDate;
					}
				}
			},
			moreDate() {
				this.$refs.calendar.open();
			}
		}
	}
</script>

<style lang="scss">
	.title {
		font-weight: 800;
		font-size: 16px;
	}

	//右侧箭头
	.right-arrow {
		overflow: hidden;
		width: 0.5rem;
		height: 0.5rem;
		text-indent: -99999px;
		border-left: 0.15rem solid #b2b2b2;
		border-top: 0.15rem solid #b2b2b2;
		transform: rotate(135deg);
		-o-transform: rotate(135deg);
		-moz-transform: rotate(135deg);
		-webkit-transform: rotate(135deg);
	}

	.priceCalenarBox {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding-top: 10rpx;

		.date-type {
			overflow: hidden;
			white-space: nowrap;

			.date-list {
				width: 50%;
				display: flex;
				align-items: center;
				background-color: #fff;
				color: #efb43e;

				.date-list-item {
					width: 180rpx !important;
					display: flex;
					flex-direction: column;
					align-items: center;
					box-sizing: border-box;
					font-size: 13px;
					padding: 20rpx;
					margin-right: 20rpx;
					position: relative;
					border-radius: 8rpx;
					border: #e9eaee solid 2rpx;
				}
			}
		}

		.more {
			width: 60px;
			background-color: #fff;
			z-index: 10;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #c2c2c2;
			right: 0;
			border-radius: 8rpx;
			border: 2rpx solid #e9eaee;
			padding: 5rpx 10rpx;
			margin-left: 10rpx;

			.text {
				width: 45rpx;
				font-size: 23rpx;
				font-weight: 600;
			}
		}
	}



	::-webkit-scrollbar {
		display: none;
	}
</style>
